<template>
  <div class="app">
    <paymentNavbar title="订单详情"></paymentNavbar>
    <div class="contain">
      <list>
        <cell>
          <div class="navbar_top border-bottom">
            <div class="navbar_top_contain border-bottom">
              <text class="font-size32">订单号：CJ20211130110850703308</text>
            </div>
          </div>
          <div class="navbar_middle">
            <div class="transaction-mode border-bottom padding-lett-right">
              <div>
                <text class="font-size32 padding-top-bottom40">交易方式(点击图标查看)</text>
              </div>
              <div>
                <text class="mine-order-icon zlejiedan-alipay">&#xe675;</text>
              </div>
            </div>
            <div class="transaction-mode border-bottom padding-lett-right">
              <div>
                <text class="font-size32 padding-top-bottom40">卖方手机号：15959250493</text>
              </div>
              <div>
                <text class="mine-order-icon color-red" style="font-size: 44px">&#xe640;</text>
              </div>
            </div>
            <div class="transaction-mode border-bottom padding-lett-right">
              <div>
                <text class="font-size32 padding-top-bottom40 color-red">如有发现上传假凭证一律永久性封号处理</text>
              </div>
            </div>
            <div class="transaction-mode border-bottom padding-lett-right">
              <div>
                <text class="font-size32 padding-top-bottom40 color-red">支付金额：1020	</text>
              </div>
            </div>

            <div class="transaction-mode padding-lett-right">
              <div>
                <text class="font-size32 padding-top-bottom40">姓名：陈剑鹏</text>
              </div>
            </div>
            <div class="transaction-mode padding-lett-right">
              <div>
                <text class="font-size32 padding-top-bottom40">支付宝账号：cc22jianpeng@163.com</text>
              </div>
            </div>

            <div class="alipay border-bottom" style="padding-bottom: 20px">
              <img class="alipay-image" src="https://www.qmin365.cn/attachment/images/9/2021/11/VeaemQYd9d9RDb24g44rdVvZyRMr70.jpg">
            </div>
          </div>
        </cell>
        <cell>
          <div class="navbar_middle" style="margin-top: 20px">
            <div class="transaction-mode padding-lett-right">
              <div>
                <text class="font-size32 padding-top-bottom40">姓名：陈剑鹏</text>
              </div>
            </div>
            <div class="transaction-mode padding-lett-right">
              <div>
                <text class="font-size32 padding-top-bottom40">微信账号：cc22jianpeng@163.com</text>
              </div>
            </div>
            <div class="alipay border-bottom" style="padding-bottom: 20px">
              <img class="alipay-image" src="https://rzico-weex.oss-cn-hangzhou.aliyuncs.com/images/321321_20211130145422.jpg">
            </div>
          </div>
        </cell>
        <cell>
          <div class="navbar_middle" style="margin-top: 20px">
            <div class="transaction-mode padding-lett-right">
              <div>
                <text class="font-size32 padding-top-bottom40">姓名：陈剑鹏</text>
              </div>
            </div>
            <div class="transaction-mode padding-lett-right">
              <div>
                <text class="font-size32 padding-top-bottom40">银行：厦门银行</text>
              </div>
            </div>
            <div class="transaction-mode padding-lett-right">
              <div>
                <text class="font-size32 padding-top-bottom40">银行账号：6222027388383993877</text>
              </div>
            </div>

          </div>
        </cell>
        <cell>
          <div class="border-bottom Underline qrcode-wrap">
            <div class="qrcode">
              <text class="qrcode-text">上传付款凭证</text>
              <upload @metaClick="metaClick($event,index)"></upload>
            </div>
            <div class="submit-wrap padding-lett-right">
              <div class="submit" style="margin-bottom: 20px">
                <text class="font-size32 submit-text">提交</text>
              </div>
            </div>
          </div>
        </cell>
      </list>
    </div>
  </div>

</template>
<script>

import paymentNavbar from "./components/myNavbar/paymentNavbar"
import upload from './components/upload/upload.vue'

export default {
  name: "paymentDetails.vue",
  components: { paymentNavbar, upload }

}
</script>
<style scoped>
.app{
  background-color: rgba(248, 248, 248, 1);
}

.navbar_top{
  position: relative;
  width: 750px;
  height: 80px;
  /*background-color: #FF6766;*/
}
.navbar_top_contain{
  display: flex;
  flex-direction: row;
  align-items: center;
  padding-left: 20px;
  position: absolute;
  height: 60px;
  width: 710px;
  background-color: white;
  bottom: -1px;
  left: 20px;
  border-top-left-radius: 12px;
  border-top-right-radius: 12px;
}
.mine-order-icon {
  margin-bottom: 10px;
  font-family: iconfont2;
  font-size: 60px;
  /*color: #DFBB85;*/
}
.transaction-mode{
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
}
.navbar_middle{
  background-color: white;
  margin-left: 20px;
  margin-right: 20px;
  /*padding: 0px 20px;*/
}
.alipay-image{
  width:720px;
  height: 1100px;
}
.font-size32{
  font-size: 32px;
}
.padding-top-bottom40{
  padding:20px 0px;
}

.border-bottom{
  border-bottom-style: solid;
  border-bottom-width: 1px;
  border-bottom-color: #ebf2f0;
}
.border-top{
  border-top-style: solid;
  border-top-width: 1px;
  border-top-color: #ebf2f0;
}
.padding-lett-right{
  padding: 0 20px;
}
.color-red{
  color: red;
}

.zlejiedan-alipay {
  color: #03cce4;
}
.qrcode-wrap{
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.qrcode{
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-left: 20px;
  padding-top: 15px;
}
.qrcode-text{
  font-size: 30px;
}

.submit-wrap{
  display: flex;
  flex-direction: row;
  justify-content: center;
}
.submit-text{
  padding: 18px 130px;
  border-radius: 12px;
  color: white;
}
.submit{
  background-color: #07bfa3;
  border-radius: 12px;
}
</style>
